import React from 'react';


/**
 * 统计展示框
 * @param params:Arr
 */
class statisticsBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params && nextProps.params.length > 0) {
            this.setState({
                options: nextProps.params
            })
        }
    }

    componentDidUpdate() {
        Array.from(document.querySelectorAll('.box')).forEach((item) => {
            if(item.getAttribute('style')) return
            item.setAttribute('style', `width:${100 / this.state.options.length}%`)
        })
    }

    render() {

        let thin=this.state.options.some(item=>{return item.num&&item.num.length>9});
        return (
            <div>
                {this.state.options.length > 0 && <div className="boxOuter">
                    {this.state.options.map((item, index) => (
                        <div className="box" key={index} style={item.style}>
                            {typeof item.actions !== 'function'&&<div className={`num ${thin ? 'thin' : ''}`}>{item.num || '0'}<span>{item.unit}</span>
                            </div>}
                            <div>{ typeof item.actions === 'function' ? item.actions():item.desc}
                              <span>  {item.btn && item.btn()}</span>
                            </div>
                        </div>
                    ))}
                </div>}
            </div>
        )
    }
}

export default statisticsBox